<script setup lang="ts">
import listItem from "./components/listItem";
import { usePaging } from "@/hooks/usePaging";
import { Apis } from "@/apis";
import { reactive, ref, provide, watch } from "vue";
import FuncShowConfirmBox from "@/utils/confirmBox";
import { useUserStore } from "@/stores";
import searchFrom from "@/components/funcs/searchForm/searchFrom.vue";
import postDteail from "@/components/views/postDetail/postDteail.vue";
import tabTwo from "@/components/funcs/tab_two/tabTwo.vue";
const userStore = useUserStore();
const postTypes: string[] = reactive([
  "所有",
  "公告",
  "失物招领",
  "意见反馈",
  "社团活动",
]);
if(!userStore.userInfo!.inAnyClubTeacher){
  postTypes.pop()
}
const ApiParams: { statu: 3; content: string; type: string | number } =
  reactive({
    statu: 3,
    content: "",
    type: "all",
  });
const {
  data,
  pages,
  total,
  pagesize,
  detailData,
  changePage,
  passPost,
  deletePost,
  refreshData,
  getPostDetail,
} = usePaging(Apis.getPostListByUserId, ApiParams, 15);
//----
const postDetailRef = ref<InstanceType<typeof postDteail>>();
const showPostDetail = async (id: number): Promise<void> => {
  await getPostDetail(id);
  postDetailRef.value!.open();
};
const handlePassPost = (id: number) => {
  FuncShowConfirmBox("确定通过审核吗？", () => {
    passPost(id), postDetailRef.value!.close();
  });
};
const handleDeletePost = (id: number) => {
  FuncShowConfirmBox("确定删除吗？", () => {
    deletePost(id), postDetailRef.value!.close();
  });
};
provide("showPostDetail", showPostDetail);
provide("handlePassPost", handlePassPost);
provide("handleDeletePost", handleDeletePost);
//-----
const activeType = ref<number>(0);
watch(activeType, (newVal) => {
  if (newVal === 0) {
    ApiParams.type = "all";
  } else {
    ApiParams.type = newVal - 1;
  }
  refreshData();
});
</script>
<template>
  <div class="container">
    <postDteail :data="detailData" ref="postDetailRef">
      <el-button type="success" plain @click="handlePassPost(detailData.id)"
        >通过审核</el-button
      >
      <el-button plain type="danger">不通过</el-button>
    </postDteail>
    <div class="conTop">
      <span>管理员帖子审核列表</span>
      <div class="tab">
        <tabTwo
          :tabList="postTypes"
          v-model="activeType"
          activeColor="#5085e6"
        ></tabTwo>
      </div>
      <searchFrom
        v-model="ApiParams.content"
        @funcSearch="refreshData"
      ></searchFrom>
    </div>
    <div class="conList" v-if="data.length ">
      <listItem
        v-for="posiListItem in data"
        :key="posiListItem.id"
        :postItem="posiListItem"
      />
    </div>
    <div class="noData" v-else>
      暂无数据
    </div>
    <div
      style="
        display: flex;
        flex-direction: row-reverse;
        margin-right: 20px;
        height: 6vh;
      "
    >
      <el-pagination
        v-model:current-page="pages"
        size="large"
        layout="total,prev, pager, next, jumper"
        :total="total"
        :page-size="pagesize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  .conTop {
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    span {
      font-size: 22px;
      font-weight: bold;
    }
    .tab {
      width: 500px;
      height: 40px;
    }
  }
  .conList,
  .noData {
    height: 75vh;
    overflow-y: scroll;
  }
  .noData{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: gray;
  }
}
</style>
